<template>
	<view v-if="speakData.length !== 0">
		<view class="item" v-for="item in speakData" :key="item.id">
			<view class="itemTop">
				<image :src="item.speakHeadImg" mode="widthFix"></image>
				<text style="margin: 0 10upx;">{{item.speakName}}</text>
				<text style="color: gray;">来自分类：{{item.speakFenlei}}</text>
			</view>
			<view class="Content">
				<text>{{item.speakContent}}</text>
				<view>
					<image src="../image/yiyauntoutouting.png" mode="heightFix" @click="voice"></image>
					<image :src="item.doctorHeadImg" mode="heightFix"></image>
				</view>
			</view>
			<view class="itemBottom">
				<text>{{sjc(item.speakTime)}}</text>
				<view class="conBox">
					<view>
						<image src="../image/headsetQ.png" mode="heightFix"></image>
						<text>{{item.speakIcon1}}</text>
					</view>
					<view @click="zan(item)">
						<image src="../image/zanQ.png" mode="heightFix"></image>
						<text>{{item.speakIcon2}}</text>
					</view>
					<view>
						<image src="../image/toppingQ.png" mode="heightFix"></image>
					</view>
					<view @click="dialogVisible2 = true">
						<image src="../image/shareQ.png" mode="heightFix"></image>
					</view>
				</view>
			</view>
		</view>
		<!-- 跳转 支付 遮罩层 -->
		<el-dialog title="提示" :visible.sync="dialogVisible" :before-close="handleClose" :close-on-click-modal='false'>
			<text @click="payment">确认支付1.00元</text>
			<view class="bottom" @click="dialogVisible = false">取消</view>
		</el-dialog>
		<!-- 跳转 分享 遮罩层 -->
		<el-dialog title="提示" :visible.sync="dialogVisible2" :before-close="handleClose2" class='mackTiao'
			:close-on-click-modal='false'>
			<!-- :close-on-click-modal='false' 不允许点击空白处关闭遮罩层 -->
			<view class="con">
				<view @click="shareIcon">
					<image src="../image/朋友圈.png" mode="heightFix"></image>
				</view>
				<view @click="shareIcon">
					<image src="../image/微信好友.png" mode="heightFix"></image>
				</view>
				<view @click="shareIcon">
					<image src="../image/QQ好友.png" mode="heightFix"></image>
				</view>
				<view @click="shareIcon">
					<image src="../image/QQ空间.png" mode="heightFix"></image>
				</view>
				<view @click="shareIcon">
					<image src="../image/微博.png" mode="heightFix"></image>
				</view>
			</view>
		</el-dialog>
	</view>
	<view v-else class="none">
		暂无数据
	</view>

</template>

<script>
	import time from '../js/time.js'
	export default {
		props: ['speakData'],
		data() {
			return {
				data: {},
				dialogVisible: false,
				dialogVisible2: false,
			};
		},
		methods: {
			// 遮罩层自带事件
			handleClose(done) {
				this.$confirm('确认关闭？')
					.then(_ => {
						done();
					})
					.catch(_ => {});
			},
			handleClose2(done) {
				this.$confirm('确认关闭？')
					.then(_ => {
						done();
					})
					.catch(_ => {});
			},
			// 确认支付1元
			payment() {
				this.dialogVisible = false
				this.data.isPayment = '1'
				this.$api.putMjtQuestion(this.data).then(res => {
					// console.log(res)
					if (res.code == 200) {
						this.getMjtQuestionData()
					}
				})
			},
			// 分享的小图标
			shareIcon() {
				uni.showToast({
					title: '分享成功',
					duration: 2000,
					success: (res) => {
						// console.log(res)
						this.dialogVisible2 = false
					}
				})
			},
			// 时间戳转时间
			sjc(sjc) {
				return time(Number(sjc))
			},
			// 获取是否成为专家
			getMjtQuestionData() {
				this.$api.getMjtQuestion().then(res => {
					// console.log(res)
					if (res.code == 200) {
						this.data = res.data[0]
					}
				})
			},
			// 点击付款事件
			voice() {
				if (this.data.isPayment === '0') {
					this.dialogVisible = true
				} else {
					uni.showToast({
						title: '您已成为专家，无需再次支付',
						duration: 2000,
						icon: "none"
					});
				}
			},
			// 点赞事件
			zan(item) {
				uni.getStorage({
					key: `storage_${item.id}`,
					success: (res) => {
						if(res.data == "true") {
							item.speakIcon2 = item.speakIcon2-1
							this.$api.putMjtSpeak(item).then(res => {
								// console.log(res)
								if(res.code == 200) {
									uni.setStorage({
										key: `storage_${item.id}`,
										data: 'false'
									});
								}
							})
						} else {
							item.speakIcon2 = item.speakIcon2+1
							this.$api.putMjtSpeak(item).then(res => {
								// console.log(res)
								if(res.code == 200) {
									uni.setStorage({
										key: `storage_${item.id}`,
										data: 'true'
									});
								}
							})
						}
					},
					fail: (res) => {
						if (res.data == '') {
							item.speakIcon2 = item.speakIcon2+1
							this.$api.putMjtSpeak(item).then(res => {
								// console.log(res)
								if(res.code == 200) {
									uni.setStorage({
										key: `storage_${item.id}`,
										data: 'true'
									});
								}
							})
						}
					}
				});

			}
		},
		created() {
			this.getMjtQuestionData()
		},
	}
</script>

<style lang="less">
	.none {
		text-align: center;
		margin: 100upx auto 0;
	}

	.item {
		width: 100%;
		height: 27vh;
		margin: 0;
		box-sizing: border-box;
		padding: 3%;
		background: white;
		display: flex;
		flex-direction: column;
		justify-content: space-between;

		.itemTop {
			width: 100%;
			height: 25%;
			font-size: 26upx;
			display: flex;
			align-items: center;

			image {
				width: 10%;
			}
		}

		.itemBottom {
			width: 100%;
			height: 15%;
			padding-bottom: 20upx;
			font-size: 26upx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 2upx solid rgba(203, 203, 203, 0.5);

			.conBox {
				width: 50%;
				height: 100%;
				font-size: 24upx;
				color: grey;
				display: flex;
				justify-content: space-around;

				view {
					display: flex;
					align-items: center;

					image {
						height: 70%;
					}

					text {
						margin-left: 10upx;
					}
				}

			}
		}

		.Content {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: space-evenly;

			text {
				display: block;
				font-size: 26upx;
				height: 40%;
				overflow: hidden; //超出的文本隐藏
				display: -webkit-box;
				-webkit-line-clamp: 2; // 超出多少行
				-webkit-box-orient: vertical;
			}

			view {
				height: 40%;
				display: flex;
				align-items: center;
				justify-content: flex-end;

				image {
					height: 100%;
				}

				image:first-child {
					height: 80%;
					margin-right: 10upx;
				}
			}
		}
	}

	.item:nth-child(1) {
		margin-top: 40upx;
	}

	::v-deep .el-dialog {
		width: 70%;
		height: 15vh;
		margin-top: 35vh !important;
		border-radius: 24upx;
		overflow: hidden;
	}

	::v-deep .el-dialog__header,
	.el-dialog__footer {
		display: none;
	}

	::v-deep .el-dialog__body {
		height: 100%;
		padding: 0;
		display: flex;
		flex-direction: column;

		text {
			display: block;
			height: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 40upx;
			text-align: center;
			border-bottom: 2upx solid rgba(203, 203, 203, 0.5);
		}

		.bottom {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 36upx;
		}
	}

	.mackTiao ::v-deep .el-dialog {
		width: 80% !important;
		height: 25vh !important;
		border-radius: 16upx;
	}

	.mackTiao ::v-deep .el-dialog__body {
		width: 100%;
		height: 100%;

		.con {
			height: 100%;
			display: flex;
			flex-wrap: wrap;
			align-items: center;

			view {
				width: 33%;
				height: 40%;
				text-align: center;

				image {
					height: 100%;
				}
			}

		}
	}
</style>
